<template>
  <div class='course-order-notice'>
    <div class="title">课程订单</div>
    <div class="order-card">
      <div class="card-img">
        <van-image style="width: 100%;height: 100%;" fit="cover" :src="imgUrl">
          <template #error>
            <img src="/images/course_default.png">
          </template>
        </van-image>
      </div>
      <div class="card-main">
        <div class="course-title otw-1">{{ orderDetails.order.courseName }}</div>
        <div class="date">预约日期: {{ format(orderDetails.order.appointTime) }}{{ orderDetails.order.timeType == 1 ? '下午场' :
          '上午场' }}
        </div>
        <div class="info-main">
          <div class="info-item">
            <span>地点</span><span>{{ orderDetails.order.location }}</span>
          </div>
          <div class="info-item">
            <span>听众人数</span><span>{{ orderDetails.order.listenerCount }}</span>
          </div>
          <div class="info-item">
            <span>联系人</span><span>{{ orderDetails.order.linkMan }}</span>
          </div>
          <div class="info-item">
            <span>联系人电话</span><span>{{ orderDetails.order.linkManTel }}</span>
          </div>
          <div class="info-item">
            <span>提交时间</span><span>{{ moment(orderDetails.order.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </div>
          <div class="info-item">
            <span>预约日期</span><span>{{ format(orderDetails.order.appointTime) }}</span>
          </div>
        </div>

      </div>
      <div class="button-group">
        <div class="split-line"></div>
        <van-button style="width: 190px;color: #8B8B8B !important;" color="#F0F0F0" round @click="reject">拒
          绝</van-button>
        <van-button style="width: 190px;" color="#AE3845" round @click="openConfirm">确 认</van-button>
      </div>
    </div>
  </div>
  <van-popup v-model:show="confirmVis" round position="bottom">
    <div class="confirm-pop">
      <van-radio-group v-model="status">
        <van-cell-group inset>
          <van-cell title="通过" clickable @click="status = 1">
            <template #right-icon>
              <van-radio checked-color="#AB2F3C" :name="1" />
            </template>
          </van-cell>
          <van-cell title="拒绝" clickable @click="status = 2">
            <template #right-icon>
              <van-radio checked-color="#AB2F3C" :name="2" />
            </template>
          </van-cell>
          <van-field v-model="appointDescribe" rows="3" autosize label="意见" type="textarea" placeholder="请输入意见" />
        </van-cell-group>
      </van-radio-group>
      <div class="flex-center" style="margin-top: 30px;gap: 50px;">
        <van-button style="width: 150px;color: #8B8B8B !important;" color="#F0F0F0" round @click="confirmVis = false">取
          消</van-button>
        <van-button style="width: 150px;" color="#AE3845" round @click="confirm">确 认</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: 'course-order-notice'
}
</script>
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router'
import { $GET, $POST } from '@/utils/request.js'
import moment, { format } from '@/utils/moment.js'
import { showSuccessToast, showFailToast } from 'vant';
import 'vant/lib/index.css'

const route = useRoute()

/**获取订单信息 */
const orderDetails = ref({ order: {}, expert: {} })
const getOrder = () => {
  $GET('/Preach/GetPreachOrderDetail', { id: route.query.orderId }).then(res => {
    if (res.isError) return
    orderDetails.value = res.result
    getCourse()
  })
}

const courseDetils = ref({})
const imgUrl = ref('/images/course_default.png')
const getCourse = () => {
  $GET('/Preach/GetPreachCourseDetail', { id: orderDetails.value.order.courseId, }).then(res => {
    if (res.isError) return
    courseDetils.value = res.result
    if (courseDetils.value.courseData.coverUrl) {
      const jsonObj = JSON.parse(courseDetils.value.courseData.coverUrl)
      imgUrl.value = import.meta.env.VITE_APP_FRONT_HOST + '/TpwpStatic' + jsonObj?.filePathArray[0]?.CompleteFilePath
    }
  })
}

getOrder()

const confirmVis = ref(false)
const reject = () => {
  status.value = 2
  confirmVis.value = true
}
const openConfirm = () => {
  status.value = 1
  confirmVis.value = true
}
const status = ref()
const appointDescribe = ref('')
const confirm = () => {
  if (status.value == 2 && !appointDescribe.value) return showFailToast('拒绝时请填写操作理由')
  $POST('/Preach/ConfirmPreachOrder', { orderId: route.query.orderId, status: status.value, appointDescribe: appointDescribe.value }).then(res => {
    if (res.isError) return showFailToast(res.message)
    showSuccessToast(res.message)
    confirmVis.value = false
  })
}
</script>
<style lang="scss" scoped>
.course-order-notice {
  padding: 0 38px 133px;
  background: linear-gradient(180deg, #AB2F3C 0%, #FFFFFF 100%);

  .title {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    padding: 70px 0 25px;
    line-height: 81px;
  }

  .order-card {
    min-height: 1300px;
    box-shadow: 0px 50px 99px 1px rgba(196, 196, 196, 0.17);
    border-radius: 0 0 30px 30px;
    background-color: #fff;

    .card-img {
      width: 100%;
      height: 346px;

      .default {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .card-main {
      padding: 27px 29px 67px;
      margin-bottom: 80px;

      .course-title {
        font-size: 30px;
        font-weight: bold;
        color: #171717;
      }

      .date {
        font-size: 23px;
        font-weight: 500;
        color: #798087;
        margin: 22px 0;
      }

      .info-main {
        min-height: 448px;
        background: #F5F6F7;
        border-radius: 8px;
        padding: 26px 23px;

        .info-item {
          display: flex;
          margin-bottom: 34px;

          span {
            flex: 1;
            font-size: 26px;
            font-weight: 400;
            color: #8B8B8B;

            &:last-child {
              text-align: right;
              color: #464646;
            }
          }
        }
      }
    }

    .button-group {
      display: flex;
      gap: 25px;
      padding: 75px 91px 50px;
      position: relative;

      .split-line {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-top: 1px dashed #DEE2EE;
      }

      // &::before {
      //   content: '';
      //   position: absolute;
      //   width: 50px;
      //   height: 50px;
      //   border-radius: 50%;
      //   background-color: #E3C0C3;
      //   top: -25px;
      //   left: -25px;
      //   z-index: 2;
      // }

      // &::after {}
    }
  }
}
</style>
<style>
.confirm-pop {
  background-color: #F5F6F7;
  padding: 50px 10px 80px;
}
</style>
